<template>
  <dialog-tpl class="form-dialog" :dialog-config="dialogConfig">
    <template #dialogContent>
      <div class="transfer-box flex-center mt-20">
        <el-transfer
          v-model="value"
          class="h-full"
          filterable
          :data="parkConfig.parkList"
          :titles="titles"
        >
        </el-transfer>
      </div>
      <div slot="footer" class="dialog-footer mt-30">
        <el-button size="medium" class="mr-20" type="primary" @click="transferSubmit">
          保 存
        </el-button>
        <el-button size="medium" @click="dialogConfig.show = false">
          取 消
        </el-button>
      </div>
    </template>
  </dialog-tpl>
</template>

<script>
import Parking from '@/services/parking-list.js'
export default {
  inject: ['parkConfig',
  ],
  data () {
    return {
      dialogConfig: {
        show: false,
        title: '绑定车场',
        width: '48%',
        data: {}
      },
      value: [],
      titles: ['所有车场',
        '绑定车场',]
    }
  },
  watch: {
    'dialogConfig.show': {
      handler(newVal, oldVal) {
        if (newVal) {
          this.init()
        }
      },
      immediate: true
    }
  },
  methods: {
    init () {
      if (this.parkConfig.parkData && this.parkConfig.parkData.length) {
        this.value = [...this.parkConfig.parkData,]
      } else {
        this.value = []
      }
      this.getParking()
    },
    getParking () {
      Parking.ParkingList({pageNum: 1, pageSize: 9999, isOperate: 1}).then(res => {
        this.parkConfig.parkList = (res.rows || []).map(i => ({ label: i.parkName, key: i.id, disabled: false, ...i}))
      })
    },
    transferSubmit () {
      console.log(this.value)
      this.dialogConfig.show = false
      this.parkConfig.parkData = this.value
      this.parkConfig.parkName = this.parkConfig.parkList.filter(i => {
        if (this.value.findIndex(v => i.key === v) !== -1) {
          return i
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

::v-deep .el-transfer-panel{
width: 300px !important; /* 左右两个穿梭框的高度和宽度 */
height: 450px !important;
}
::v-deep .el-transfer-panel__list.is-filterable {
height: 340px;
}
</style>

